<template>
  <section class="Block">
    <a-spin tip="加载中..." class="position" v-if="loading"> </a-spin>
    <a-tabs v-model="activeKey">
      <template #tabBarExtraContent>
        <Button type="search" label="刷新" @click="getDetails" />
      </template>
      <a-tab-pane key="1" tab="仓实时信息">
        <div class="Box">
          <a-form :model="details" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <template v-for="(realTimeForm, index) in details.cabinetBins">
              <a-card :title="'格口序号: ' + realTimeForm.binIndex" :key="index">
                <a-row type="flex" justify="space-between">
                  <!-- <a-col :span="24" v-if="realTimeForm.cabinetBinState"> -->
                  <!-- <a-col :span="12">
                      <Input
                        :form="realTimeForm.fault[0]"
                        prop="faultName"
                        label="故障名称"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col> -->

                  <!-- </a-col> -->
                  <template v-if="realTimeForm.binState">
                    <a-col :span="12">
                      <Select
                        :form="realTimeForm"
                        prop="status"
                        label="格口状态"
                        placeholder=" "
                        :optList="enumsTypeJson.CHARGING_CABINET_BIN_STATUS"
                        readonly
                      >
                      </Select>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="voltage"
                        label="充电电压"
                        placeholder=" "
                        suffix="V"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="current"
                        label="充电电流"
                        placeholder=" "
                        suffix="A"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="power"
                        label="有功功率"
                        placeholder=" "
                        suffix="W"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="energy"
                        label="有功电能"
                        placeholder=" "
                        suffix="kW·h"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="fanStatus"
                        label="风机转速"
                        placeholder=" "
                        suffix="rpm"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="temperature"
                        label="实时温度"
                        placeholder=" "
                        suffix="℃"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Select
                        :form="realTimeForm.binState"
                        prop="doorStatus"
                        label="仓门状态"
                        placeholder=" "
                        :optList="enumsTypeJson.DOOR_STATUS"
                        readonly
                      >
                      </Select>
                    </a-col>

                    <a-col :span="12">
                      <Select
                        :form="realTimeForm.binState"
                        prop="relayStatus"
                        label="输出继电器状态"
                        placeholder=" "
                        :optList="[{name:'吸合',code:1},{name:'断开',code:0}]"
                        readonly
                      >
                      </Select>
                    </a-col>
                    <a-col :span="12">
                      <Select
                        :form="realTimeForm.binState"
                        prop="heatPartsStatus"
                        label="加热部件状态"
                        placeholder=" "
                        :optList="[{name:'运行',code:1},{name:'停止',code:0}]"
                        readonly
                      >
                      </Select>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="realTimeForm.binState"
                        prop="receiveTime"
                        label="接收时间"
                        placeholder=" "
                        readonly
                      >
                      </Input>
                    </a-col>
                  </template>
                  <template v-else>暂无信息</template>
                </a-row>
              </a-card>
              <br :key="'br/' + index" />
            </template>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="仓使用信息">
        <div class="Box">
          <a-form :model="details" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <template v-for="(useForm, index2) in details.cabinetBins">
              <a-card :title="'格口序号: ' + useForm.binIndex" :key="index2">
                <template v-if="useForm.chargingOrder">
                  <a-row type="flex" justify="space-between">
                    <!--<a-col :span="24" v-if="useForm.chargingOrder">
                     <a-col :span="12">
                      <Input
                        :form="useForm.chargingOrder"
                        prop="name"
                        label="客户姓名"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="useForm.chargingOrder"
                        prop="mobile"
                        label="手机号"
                        placeholder=" "
                        readonly>
                      </Input>
                    </a-col>
                  </a-col> -->
                    <a-col :span="12">
                      <Input :form="useForm.chargingOrder" prop="code" label="交易流水号" placeholder=" " readonly>
                      </Input>
                    </a-col>
                    <a-col :span="12">
                      <Select
                        :form="useForm.chargingOrder"
                        prop="status"
                        label="业务状态"
                        placeholder=" "
                        :optList="enumsTypeJson.CHARGING_ORDER_STATUS"
                        readonly
                      >
                      </Select>
                    </a-col>
                    <a-col :span="12">
                      <datePicker
                        :form="useForm.chargingOrder"
                        prop="startTime"
                        label="开始时间"
                        placeholder=" "
                        format="YYYY-MM-DD HH:mm:ss"
                        readonly
                      >
                      </datePicker>
                    </a-col>
                    <a-col :span="12">
                      <datePicker
                        :form="useForm.chargingOrder"
                        prop="endTime"
                        label="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        placeholder=" "
                        readonly
                      >
                      </datePicker>
                    </a-col>
                    <a-col :span="12">
                      <Input
                        :form="useForm.chargingOrder"
                        prop="chargingSecond"
                        label="充电时长"
                        placeholder=" "
                        suffix="秒"
                        readonly
                      >
                      </Input>
                    </a-col>
                    <!-- <a-col :span="12">
                    <Input
                      :form="useForm.chargingOrder"
                      prop="surplusSecond"
                      label="剩余时长"
                      placeholder=" "
                      suffix="秒"
                      readonly>
                    </Input>
                  </a-col> -->
                    <a-col :span="12">
                      <Input
                        :form="useForm.chargingOrder"
                        prop="chargingPower"
                        label="充电电量"
                        suffix="kW·h"
                        placeholder=" "
                        readonly
                      >
                      </Input>
                    </a-col>
                    <!-- <a-col :span="12">
                    <Input
                      :form="useForm.chargingOrder"
                      prop="chargingFees"
                      label="充电费用"
                      placeholder=" "
                      suffix="元"
                      readonly>
                    </Input>
                  </a-col>
                  <a-col :span="12">
                    <Input
                      :form="useForm.chargingOrder"
                      prop="occupyFees"
                      label="占仓费用"
                      placeholder=" "
                      suffix="元"
                      readonly>
                    </Input>
                  </a-col> -->
                    <a-col :span="12">
                      <Select
                        :form="useForm.chargingOrder"
                        prop="terminalType"
                        label="终端类型"
                        placeholder=" "
                        :optList="enumsTypeJson.TERMINAL_TYPE"
                        readonly
                      >
                      </Select>
                    </a-col>
                    <!-- <a-col :span="12">
                    <Input
                      :form="useForm.userCharging"
                      prop="stopChargingReason"
                      label="停止充电原因"
                      placeholder=" "
                      readonly>
                    </Input>
                  </a-col> -->
                    <a-col :span="12">
                      <datePicker
                        :form="useForm.chargingOrder"
                        prop="receiveTime"
                        label="接收时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        placeholder=" "
                        readonly
                      >
                      </datePicker>
                    </a-col>
                  </a-row>
                </template>
                <template v-else>暂无信息</template>
              </a-card>
              <br :key="'br/' + index2" />
            </template>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="柜基本信息">
        <div class="Box">
          <a-form :model="basicForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row type="flex" justify="space-between">
              <a-col :span="12">
                <Input :form="basicForm" prop="code" label="设备编号" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="name" label="设备名称" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <Select
                  :form="basicForm"
                  prop="isOnline"
                  label="联网状态"
                  placeholder=" "
                  :optList="enumsTypeJson.IS_ONLINE"
                  readonly
                >
                </Select>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="chargingCabinetModeName" label="设备型号" placeholder=" " readonly>
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="chargingCabinetTypeName"
                  label="设备类型"
                  placeholder=" "
                  readonly
                >
                </Input>
              </a-col>
              <template>
                <a-col :span="12">
                  <Input
                    :form="basicForm"
                    prop="current"
                    label="额定电流"
                    placeholder=" "
                    suffix="A"
                    readonly
                  >
                  </Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="basicForm"
                    prop="voltage"
                    label="额定电压"
                    placeholder=" "
                    suffix="V"
                    readonly
                  >
                  </Input>
                </a-col>
                <a-col :span="12">
                  <Input
                    :form="basicForm"
                    prop="quantity"
                    label="有功电量"
                    placeholder=" "
                    suffix="kW·h"
                    readonly
                  >
                  </Input>
                </a-col>
                <!-- <a-col :span="12">
                  <Input
                    :form="basicForm"
                    prop="humidity"
                    label="湿度"
                    placeholder=" "
                    suffix="%"
                    readonly
                  >
                  </Input>
                </a-col> -->
                <a-col :span="12">
                  <Input
                    :form="basicForm"
                    prop="temperature"
                    label="温度"
                    placeholder=" "
                    suffix="℃"
                    readonly
                  >
                  </Input>
                </a-col>
                <a-col :span="12">
                  <datePicker
                    :form="basicForm"
                    prop="receiveTime"
                    label="数据接收时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder=" "
                    readonly
                  >
                  </datePicker>
                </a-col>
              </template>
              <a-col :span="12">
                <Input :form="basicForm" prop="chargeTmplName" label="费用模板" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <!-- <Input
                  :form="basicForm"
                  prop="charge.occupyChargePrice"
                  label="占仓收费"
                  suffix="元"
                  placeholder=" "
                  readonly>
                </Input> -->
                <Input
                  :form="basicForm"
                  prop="occupyFreeDuation"
                  label="占箱免费时长"
                  suffix="时"
                  placeholder=" "
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="occupyChargePrice"
                  label="占箱收费单价"
                  suffix="元"
                  placeholder=" "
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="occupyChargeDuration"
                  label="占箱收费单位时长"
                  suffix="时"
                  placeholder=" "
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="occupyChargeUpperLimit"
                  label="占箱收费上限"
                  suffix="元"
                  placeholder=" "
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="address" label="地址" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <datePicker :form="basicForm" prop="installDate" label="安装日期" format="YYYY-MM-DD"  placeholder=" " readonly>
                </datePicker>
              </a-col>
              <a-col :span="12">
                <datePicker :form="basicForm" prop="productioDate" label="出厂日期" format="YYYY-MM-DD" placeholder=" " readonly>
                </datePicker>
              </a-col>
              <a-col :span="12">
                <datePicker :form="basicForm" prop="repaireEndDate" label="保修到期时间" format="YYYY-MM-DD" placeholder=" " readonly>
                </datePicker>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="柜实时信息">
        <div class="Box">
          <a-form :model="basicForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row type="flex" justify="space-between">
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="quantity"
                  label="电量"
                  placeholder=" "
                  suffix="kW·h"
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="power"
                  label="功率"
                  placeholder=" "
                  suffix="W"
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="voltage"
                  label="电压"
                  placeholder=" "
                  suffix="V"
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="current"
                  label="电流"
                  placeholder=" "
                  suffix="A"
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="temperature"
                  label="温度"
                  placeholder=" "
                  suffix="℃"
                  readonly
                >
                </Input>
              </a-col>
              <a-col :span="12">
                <Input
                  :form="basicForm"
                  prop="signalIntensity"
                  label="信号强度"
                  placeholder=" "
                  readonly
                >
                </Input>
              </a-col>
               <a-col :span="12">
                 <Select
                  :form="basicForm"
                  prop="heatSinkStatus"
                  label="散热部件状态"
                  placeholder=" "
                  :optList="[{name:'运行',code:1},{name:'停止',code:0}]"
                  readonly
                >
                </Select>
              </a-col>
              <a-col :span="12">
                <Select
                  :form="basicForm"
                  prop="status"
                  label="状态"
                  placeholder=" "
                  :optList="[{name:'启用',code:1},{name:'禁用',code:0}]"
                  readonly
                >
                </Select>
              </a-col>
              <a-col :span="12">
                <Select
                  :form="basicForm"
                  prop="operateStatus"
                  label="操作状态"
                  placeholder=" "
                  :optList="[{name:'工作状态',code:1},{name:'静止状态',code:0}]"
                  readonly
                >
                </Select>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="outageTimes" label="断电次数" suffix="次" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="msisdn" label="物联网卡MSISDN" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="iccid" label="物联网卡ICCID" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="imsi" label="物联网卡IMSI" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <Input :form="basicForm" prop="mac" label="MAC地址" placeholder=" " readonly> </Input>
              </a-col>
              <a-col :span="12">
                <datePicker :form="basicForm" prop="simExpireDate" label="SIM卡到期" format="YYYY-MM-DD" placeholder=" " readonly>
                </datePicker>
              </a-col>
              
              <a-col :span="12">
                <Input :form="basicForm" prop="receiveTime" label="接收时间" placeholder=" " readonly> </Input>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </section>
</template>
<script>
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import datePicker from '@/components/typicalControl/datePicker';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
import { getListEnumsJson, getYesNo } from '@/utils/frequentInterface';
import { listEnumsByType, listParameterSending } from '@/api/cabin';

export default {
  name: 'EquipmentControlDetails',
  components: {
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
    datePicker: datePicker,
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    code: {
      //充电柜code
      type: String,
      default: '',
    },
  },
  data() {
    return {
      activeKey: '1',
      loading: false,
      // details: {
      //   realTimeList: [],
      //   useList: []
      // },
      basicForm: {
        name: undefined,
        code: undefined,
        isOnline: null,
        model: {
          name: undefined,
          type: {
            name: undefined,
          },
        },
        charge: {
          title: undefined,
          occupyChargePrice: undefined,
        },
      },
      enumsType: [
        'cn.com.hangar.chargingcabinet.common.entities.CabinetBinStateEntity.BinStatus',
        'CabinetBinDoorStatus',
        'BusinessState',
        'PayWay',
      ],
      enumsTypeJson: {},
      details: {},
    };
  },
  created() {
    this.getDetails();
    this.getDictionary();
  },
  mounted() {},

  methods: {
    getYesNo,
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      // this.enumsTypeJson = getListEnumsJson();
      // console.log(getListEnumsJson());
      listEnumsByType().then((res) => {
        let datas = res.data;
        for (const key in datas) {
          for (var i = 0; i < datas[key].length; i++) {
            datas[key][i].name = datas[key][i].label;
          }
        }
        this.enumsTypeJson = datas;
      });
    },
    /**
     * [getDetails 加载详情]
     * @return {[type]} [description]
     */
    getDetails() {
      if (!this.code) throw new Error('没有传入充电柜code！');
      this.loading = true;
      listParameterSending('/selectData', 'get', {
        code: this.code,
      })
        .then((res) => {
          let datas = res.data;
          this.details = datas;
          this.basicForm = { ...datas };
          this.details.realTimeList = datas.cabinetBins;
          
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * [multipleTransformation 转换倍率]
     * @param  {[type]} val          [对象实体]
     * @param  {[type]} attribute    [属性]
     * @param  {[type]} expand       [倍率]
     * @return {[type]}              [description]
     */
    multipleTransformation(val, attribute, expand) {
      if (val[attribute]) {
        val[attribute] = Number(val[attribute]) * expand;
      }
    },
  },
};
</script>

<style scoped>
.Block {
  position: relative;
  width: 100%;
  height: 100%;
}
.Block .position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  background: white;
}
.Box {
  height: 480px;
  overflow: auto;
}
</style>
